<template>
	<view>
		<uv-loading-page :loading="state.pageLoading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
		<view class="p-20px pb-120px">
			<uv-sticky offset-top="10">
				<uv-subsection :list="state.tabs" :current="state.current" @change="changeTab"
					custom-style="height: 60rpx;border-radius: 30rpx;" custom-item-style="border-radius: 30rpx;">
				</uv-subsection>
			</uv-sticky>

			<view class="mt-20px">
				<uv-search placeholder="请输入手机号或姓名搜索" v-model="state.search" :showAction="true" actionText="搜索"
					:animation="true" @search="search"></uv-search>
			</view>

			<view>
				<BigCountNum title='您当前订单总数(个)' :count='state.orderTotal'></BigCountNum>
				<!-- {{ state.cardList }} -->
				<ColorfulCard v-if="state.cardList && state.cardList.length" v-model="state.cardList"
					v-slot="slotProps">
					<view class="content">
						<uv-cell title="归属员工" :value="slotProps.data.teacheriame || '-'"></uv-cell>
						<uv-cell title="推荐人" :value="slotProps.data.recommendName || '-'"></uv-cell>
						<uv-cell title="姓名" :value="slotProps.data.realName || '-'"></uv-cell>
						<uv-cell title="手机号" :value="slotProps.data.phone || '-'"></uv-cell>
						<uv-cell title="订单编号" :value="slotProps.data.no || '-'"></uv-cell>
						<uv-cell title="新生/老生" :value="slotProps.data.studentTypeName || '-'"></uv-cell>
						<uv-cell title="购买时间" :value="slotProps.data.addTimeFormat || '-'"></uv-cell>
						<uv-cell title="所在队队员数" :value="slotProps.data.teamCount || '-'"></uv-cell>
						<uv-cell title="购买商品" :value="slotProps.data.class || '-'"></uv-cell>
						<uv-cell title="学员年龄" :value="slotProps.data.age || '-'"></uv-cell>
						<view class="mt-20px flex flex-x-around">
							<uv-button class="mt-40px" type="primary" shape="circle" text="我要晒单"
								@click="openSunbathing(slotProps.data)"></uv-button>
							<uv-button class="mt-40px" type="primary" shape="circle" text="拨打电话"
								@click="callPhone(slotProps.data.phone)"></uv-button>
							<uv-button class="mt-40px" type="primary" shape="circle" text="修改订单"
								@click="editHandle(slotProps.data)"></uv-button>
						</view>
					</view>
				</ColorfulCard>

				<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>

			</view>
		</view>

		<BackWorkSpace></BackWorkSpace>
	</view>
</template>

<script setup name="OrderList">
	import {
		reactive,
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import BackWorkSpace from '@/components/BackWorkSpace.vue'
	import BigCountNum from '@/components/BigCountNum.vue'
	import ColorfulCard from '@/components/ColorfulCard.vue'
	import {
		orderPageApi,
	} from '/http/index.js';

	const state = reactive({
		pageLoading: false,
		tabs: [],
		// 或者如下，也可以配置keyName参数修改对象键名
		// tabs: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
		current: 0,
		pageType: 0,
		search: '',
		pageSize: 0,
		pageIndex: 0,
		orderTotal: 0,
		cardList: [],
		// cardList: [{
		// 		id: 0,
		// 		src: 'https://cdn.uviewui.com/uview/album/2.jpg',
		// 		name: '肖诗雨',
		// 		tags: [{
		// 				text: '未核销',
		// 				type: 'success'
		// 			},
		// 			{
		// 				text: '已支付',
		// 				type: 'primary'
		// 			},
		// 			{
		// 				text: '队长',
		// 				type: 'danger'
		// 			}
		// 		],
		// 		content: {
		// 			employees: '大吴老师',
		// 			presenter: '大吴老师',
		// 			userName: '王艺涵',
		// 			phone: '13736033914',
		// 			orderNo: 'N20240303425338742',
		// 			stuType: '新生',
		// 			buyTime: '2024-03-11 03',
		// 			teamCount: '2人',
		// 			shop: '美术(4-12岁)',
		// 			stuAge: '8',
		// 		},
		// 	},
		// ]
	})

	const changeTab = (index) => {
		state.current = index
		if (state.pageType == 0) {
			if (state.current == 0) {
				console.log('切换 已支付客户 已支付客户 接口');
				getList(2)
			} else if (state.current == 1) {
				// state.cardList = []
				console.log('切换 已支付客户 已核销 接口');
				getList(4)
			} else if (state.current == 2) {
				console.log('切换 已支付客户 未核销 接口');
				getList(3)
			}
		}

		if (state.pageType == 1) {
			// 
		}
	}

	// 获取订单列表
	const getList = (status) => {
		state.pageLoading = true
		// 订单状态:-1= 订单失败; 0 = 下单中; 1= 订单完成; 2= 关闭订单; 3= 未核销; 4= 已核销
		// 订单状态:  订单失败-1 待付款0 已取消1 已完成2 未核销3 已核销4 关闭订单5
		orderPageApi({
			keyWord: state.search,
			status: status, //
			pageSize: state.pageSize,
			pageIndex: state.pageIndex
		}).then(res => {
			console.log('订单列表', res);
			res.items.forEach(item => {
				item.src = item.avatarUrl
				item.realName = item.name // 真实姓名
				item.name = item.userName || '-' // 昵称
				item.tags = []
				if (item.WriteOffDesc || item.WriteOffDesc == 0) {
					item.tags.push({
						text: item.WriteOffDesc ? '已核销' : '未核销', //核销信息
						type: 'success'
					})
				}
				if (item.statusFormat) {
					item.tags.push({
						text: item.statusFormat, //订单状态信息
						type: 'success'
					})
				}
				if (item.captainDesc) {
					item.tags.push({
						text: item.captainDesc, // 队长信息
						type: 'danger'
					})
				}
			})
			console.log(22235, res.items);
			state.cardList = res.items
			state.orderTotal = res.total
			state.pageLoading = false
		}).finally(() => {
			state.pageLoading = false
		})
	}

	const setTitle = () => {
		if (state.pageType == 0) {
			state.tabs = ['已支付客户', '已核销', '未核销'] // 1 4 3
			uni.setNavigationBarTitle({
				title: '订单列表'
			});
			console.log('onmount 已支付客户 已支付客户 接口');
			getList(2)
		} else if (state.pageType == 1) {
			state.tabs = ['未支付客户']
			uni.setNavigationBarTitle({
				title: '订单列表'
			});
			console.log('onmount 未支付客户 接口');
			getList(0)
		}
	}

	onLoad((option) => {
		state.pageType = option.pageType
		console.log(888, state);
		setTitle()
	})

	onShow(() => {
		console.log('show');
	})

	// 父页面监听子页面返回事件
	uni.$on('returnFromChild', (data) => {
		console.log('处理子页面返回事件');
		search()
	});

	// 搜索
	const search = () => {
		if (state.pageType == 0) {
			if (state.current == 0) {
				console.log('切换 已支付客户 已支付客户 接口');
				getList(2)
			} else if (state.current == 1) {
				// state.cardList = []
				console.log('切换 已支付客户 已核销 接口');
				getList(4)
			} else if (state.current == 2) {
				console.log('切换 已支付客户 未核销 接口');
				getList(3)
			}
		}

		// 未支付
		if (state.pageType == 1) {
			getList(0)
		}
	}

	const callPhone = (phone) => {
		console.log(phone);
		uni.makePhoneCall({
			phoneNumber: phone
		});
	}

	const editHandle = (data) => {
		uni.$uv.route({
			url: '/pages/OrderList/Edit/Edit',
			params: {
				pageType: state.pageType,
				data: JSON.stringify(data)
			}
		})
	}

	const openSunbathing = (data) => {
		uni.$uv.route({
			url: '/pages/Sunbathing/Sunbathing',
			params: {
				pageType: state.pageType,
				data: JSON.stringify(data)
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: rgb(61, 114, 255);
	}

	:deep(.uv-cell__body) {
		padding: 10rpx 0 !important;
	}
</style>